{% extends 'main_hub/base.html' %}


{% block title %}
    {{ video.name }}:&nbsp; 第{{ video_sub.number }}集
{% endblock %}

{% block nav %}
{% endblock %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h3>{{ video.name }}</h3>
                <img src="/static/img/play-btn.svg" style="width: 1.3rem">
                <span style="color: grey;">
                    {{ video.mood }}
                </span>
                &nbsp;
                <img src="/static/img/clock.svg" style="width: 1.2rem">
                <span style="color: grey;">
                    {{ video.add_time }}
                </span>
            </div>
            <div class="col-md-4"></div>
            <div class="col-md-1">
                <a href="{% url 'detail_user' %}?username={{ video.user.username }}" target="_blank"><img
                        src="{{ MEDIA_URL }}{{ video.user.image }}"
                        style="height: 50px;width: 50px;border-radius: 25px"></a>
            </div>
            <div class="col-md-3">
                <a href="{% url 'detail_user' %}?username={{ video.user.username }}"
                   style="text-decoration: none;color:black;font-size: 15px" target="_blank">
                    {% if  video.user.nick_name %}
                        {{ video.user.nick_name }}
                    {% else %}
                        {{ video.user.username }}
                    {% endif %}
                </a>
                <br>
                <button type="button" class="btn btn-primary" {% if video.user == request.user %}disabled{% endif %}
                        onclick="add_user($('#status'),{{ video.user.id }},2)" style="width: 180px;height:35px">
                    {% if fav_user %}
                        <span id="status">已关注</span>
                        <span id="fans_num">{{ video.user.fans }}</span>
                    {% else %}
                        <span id="status">关注</span>
                        <span id="fans_num">{{ video.user.fans }}</span>
                    {% endif %}
                </button>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-lg-12">
                {#                   视频播放#}
                {% if video_sub.url %}
                    <div class="video">
                        <video id="video_url" src="{{ video_sub.url }}" controls="controls" style="width: 1100px"
                               type="video/mp4"></video>
                    </div>
                {% else %}
                    <div class="video">
                        <video id="video" src="{% url "stream_video" video_sub.id %}" controls="controls"
                               style="width: 100%"
                               type="video/mp4"></video>
                    </div>
                {% endif %}
            </div>
        </div>

        <div class="row">
            <div class="col-md-1">
                <!-- 点赞视频 -->
                <div class="video_likes">
                    <a type="button" onclick="add_likes($('#likes_num'), {{ video_sub.id }},'1')">
                        <i class="bi {% if like_video %}bi-hand-thumbs-up-fill{% else %} bi-hand-thumbs-up{% endif %} text-danger"
                           id="like_img" style="font-size: 30px;user-select: none">
                            <span class="text-dark" id="likes_num" style="font-size: 15px">
                        {{ video_sub.likes }}
                    </span>
                        </i>
                    </a>

                </div>
            </div>

            <div class="col-md-1">
                {# 收藏视频 #}
                <div class="hav">
                    {% if fav_video %}
                        <a type="button" id="jsLeftBtn">
                            <i class="bi bi-star-fill text-danger" id="hav_img"
                               style="font-size: 30px;user-select: none">
                                <span class="text-dark" id="hav_num" style="font-size: 15px;">
                                {{ video_sub.video.hav_num }}
                            </span>
                            </i>
                        </a>
                    {% else %}
                        <a type="button" id="jsLeftBtn">
                            <i class="bi bi-star  text-danger" id="hav_img"
                               style="font-size: 30px;user-select: none">
                                <span class="text-dark" id="hav_num" style="font-size: 15px">
                                    {{ video_sub.video.hav_num }}
                                </span>
                            </i>
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
        <hr>
        {#   视频简介 #}
        <div class="row">
            <div class="col-md">
             <span>
                 简 介：{{ video.info }}
             </span>
            </div>
        </div>
        <hr>
        <div class="row">
            {% for video_sub in all_video_subs %}
                <div class="col-md-1">
                    <a href='{% url 'video_detail' video.id %}?video_sub_number={{ video_sub.number }}'
                       id="video_sub_bu{{ video_sub.number }}">
                        <button class="btn btn-primary" style="width: 75px;height: 35px">第{{ video_sub.number }}集
                        </button>
                    </a>
                </div>
            {% endfor %}
        </div>
        <hr>

        {#    发布评论 #}
        {% if request.user.is_authenticated %}
            <h4>评论</h4>
            <div class="row">
                <div class="col-10">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <img src="{{ MEDIA_URL }}{{ user.image }}"
                                 style="width: 60px; height: 60px;border-radius: 30px">
                        </div>
                        &nbsp;&nbsp;
                        <textarea id="comment_value" style="resize: none;border-radius: 10px" class="form-control"
                                  aria-label="With textarea" placeholder="发布一条友善的评论"></textarea>
                    </div>
                </div>
                <div class="col-2">
                    <input type="button" id="comment_submit" class="btn btn-info" style="height: 60px" value="发表评论">
                </div>
            </div>
        {% else %}
            <div class="row">
                <div class="col-12 font-weight-bold text-center">
                    登录后发表评论
                </div>
            </div>
        {% endif %}
        <br>

        {#   所有评论 #}
        <div class="container">
            <div id="before_comment">
            </div>
            {% for comment in all_comments %}
                <div class="row">
                    <div class="col-1">
                        <a href="{% url 'detail_user' %}?username={{ comment.user.username }}">
                            <img src="{{ MEDIA_URL }}{{ comment.user.image }}"
                                 style="width: 60px; height: 60px;border-radius: 30px">
                        </a>
                    </div>
                    <div class="col-11">
                        <div class="row text-secondary" style="font-size: 15px">
                            <div class="col-auto">
                                <a href="{% url 'detail_user' %}?username={{ comment.user.username }}"
                                   target="_blank" class="text-decoration-none text-secondary">
                                    {% if comment.user.nick_name %}
                                        {{ comment.user.nick_name }}
                                    {% else %}
                                        {{ comment.user.username }}
                                    {% endif %}
                                </a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-11 text-break" style="font-size: 20px">
                                {{ comment.comment }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-11" style="font-size: 10px">
                                {{ comment.add_time }}
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
            {% endfor %}
            <div id="after_comment">
            </div>
            <div id="page_num" hidden>{{ page_num }}</div>
        </div>
    </div>
    {% block footer %}
    {% endblock %}

{% endblock %}

{% block custom_jss %}
    <script type="text/javascript">

        {# 点击发表评论的js #}
        $(document).ready(function () {
            {# id用# class用. #}
            $('#comment_submit').on('click', function () {
                {# 点击之后的动作 #}
                {# 根据id查找对应文本框 #}
                var comments = $('#comment_value').val();
                {# 异步请求 ajax #}
                $.ajax({
                    cache: false,
                    type: "POST",
                    async: true,
                    url: '{% url "add_comment" %}',
                    data: {
                        'video': '{{ video.id }}',
                        'video_sub': {{ video_sub }},
                        'comment': comments
                    },
                    {# 参数xhr,setting #}
                    beforeSend: function (xhr, setting) {
                        $('#comment_value').val('');
                        xhr.setRequestHeader('X-CSRFToken', '{{ csrf_token }}');
                    },
                    success: function (data) {
                        if (data.status == 'fail') {
                            if (data.msg == '用户未登录') {
                                alert(data.msg);
                                $('#login_show_button').click();
                            } else {
                                alert(data.msg);
                            }
                        } else if (data.status == 'success') {
                            var name = '';
                            if (data.nick_name) {
                                name = data.nick_name
                            } else {
                                name = data.username
                            }
                            var comment_html = '<div class="row">\n' +
                                '    <div class="col-1">\n' +
                                '        <a href="/user/detail/user/?username=' + data.username + ' ">\n' +
                                '            <img src="' + data.img + '" style="width: 60px; height: 60px;border-radius: 30px">\n' +
                                '        </a>\n' +
                                '    </div>\n' +
                                '    <div class="col-11">\n' +
                                '        <div class="row text-secondary" style="font-size: 15px">\n' +
                                '            <div class="col-auto">\n' +
                                '                <a href="/user/detail/user/?username=' + data.username + '" target="_blank" class="text-decoration-none text-secondary">\n' +
                                '                        ' + name + '\n' +
                                '                </a>\n' +
                                '            </div>\n' +
                                '        </div>\n' +
                                '        <div class="row">\n' +
                                '            <div class="col-11 text-break" style="font-size: 20px">\n' +
                                '                ' + comments + '\n' +
                                '            </div>\n' +
                                '        </div>\n' +
                                '        <div class="row">\n' +
                                '            <div class="col-11" style="font-size: 10px">\n' +
                                '                ' + data.time + '\n' +
                                '            </div>\n' +
                                '        </div>\n' +
                                '    </div>\n' +
                                '</div> <hr>';
                            $('#before_comment').after(comment_html)
                        }
                    }
                })
            })
        });

        {# 页面到底时请求评论 #}
        //要触发的事件（自己定义事件的内容）
        function getComment() {
            let page_num = $('#page_num').text();
            let no_comment = $('#no_comment').text();
            if (no_comment == '没有更多评论了。。。'){
                return
            }
            $.ajax({
                cache: false,
                type: "POST",
                async: true,
                url: '{% url "get_comment" %}',
                data: {
                    'video_sub_id': {{ video_sub.id }},
                    'page_num': parseInt(page_num) + 1
                },
                {# 参数xhr,setting #}
                beforeSend: function (xhr, setting) {
                    $('#comment_value').val('');
                    xhr.setRequestHeader('X-CSRFToken', '{{ csrf_token }}');
                },
                success: function (data) {
                    if (data.status == 'fail') {
                        alert(data.msg);
                    } else if (data.status == 'success') {
                        if (data.comment.length > 0) {
                            for (i = 0; i < data.comment.length; i++) {
                                $('#page_num').text(data.page);

                                var comment = data.comment[i];
                                var name;
                                if (comment.user__nick_name) {
                                    name = comment.user__nick_name
                                } else {
                                    name = comment.user__username
                                }

                                var after_html = '<div class="row">\n' +
                                    '    <div class="col-1">\n' +
                                    '        <a href="/user/detail/user/?username=' + name + ' ">\n' +
                                    '            <img src="{{ MEDIA_URL }}' + comment.user__image + '" style="width: 60px; height: 60px;border-radius: 30px">\n' +
                                    '        </a>\n' +
                                    '    </div>\n' +
                                    '    <div class="col-11">\n' +
                                    '        <div class="row text-secondary" style="font-size: 15px">\n' +
                                    '            <div class="col-auto">\n' +
                                    '                <a href="/user/detail/user/?username=' + name + '" target="_blank" class="text-decoration-none text-secondary">\n' +
                                    '                        ' + name + '\n' +
                                    '                </a>\n' +
                                    '            </div>\n' +
                                    '        </div>\n' +
                                    '        <div class="row">\n' +
                                    '            <div class="col-11 text-break" style="font-size: 20px">\n' +
                                    '                ' + comment.comment + '\n' +
                                    '            </div>\n' +
                                    '        </div>\n' +
                                    '        <div class="row">\n' +
                                    '            <div class="col-11" style="font-size: 10px">\n' +
                                    '                ' + comment.add_time + '\n' +
                                    '            </div>\n' +
                                    '        </div>\n' +
                                    '    </div>\n' +
                                    '</div> <hr>';
                                $('#after_comment').append(after_html);
                            }
                        } else {
                            $('#after_comment').append(`<div class="container-fluid">
                <div class="row justify-content-center">
                    <div class="col-auto">
                        <span class="text-secondary" id='no_comment'>没有更多评论了。。。</span>
                    </div>
                </div>
            </div>`);
                        }
                    }
                }
            })
        }


        var timeoutInt; // 要保证最后要运行一次

        // window.onscroll窗口添加滚动条事件
        window.onscroll = function () {
            setTimeout(function () {
                if (timeoutInt != undefined) {
                    window.clearTimeout(timeoutInt);
                }
                timeoutInt = window.setTimeout(function () {
                    //监听事件内容
                    if (getScrollHeight() == Math.trunc(getDocumentTop()) + getWindowHeight()) {
                        //当滚动条到底时,这里是触发内容
                        //异步请求数据,局部刷新dom
                        getComment()//调用上面自定义的事件函数。
                    }
                }, 105);
            }, 100);
        };


        //（浏览器窗口上边界内容高度）
        function getDocumentTop() {
            var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
            if (document.body) {
                bodyScrollTop = document.body.scrollTop;
            }
            if (document.documentElement) {
                documentScrollTop = document.documentElement.scrollTop;
            }
            scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
            return scrollTop;
        }


        //可视窗口高度（屏幕可以看见的高度）
        function getWindowHeight() {
            var windowHeight = 0;
            if (document.compatMode == "CSS1Compat") {
                windowHeight = document.documentElement.clientHeight;
            } else {
                windowHeight = document.body.clientHeight;
            }
            return windowHeight;
        }


        //滚动条滚动高度（即整个网页的高度）
        function getScrollHeight() {
            var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
            if (document.body) {
                bodyScrollHeight = document.body.scrollHeight;
            }
            if (document.documentElement) {
                documentScrollHeight = document.documentElement.scrollHeight;
            }
            scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
            return scrollHeight;
        }

        {#  添加点赞数  #}

        function add_likes(current_elem, data_id, like_type) {
            $.ajax({
                cache: false,
                type: "POST",
                url: '{% url 'add_likes' %}',
                data: {'data_id': data_id, 'like_type': like_type},
                async: true,
                beforeSend: function (xhr, setting) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
                success: function (data) {
                    if (data.status == 'fail') {
                        if (data.msg == '用户未登录') {
                            alert(data.msg);
                            $('#login_show_button').click();
                        } else {
                            alert(data.msg)
                        }
                    } else if (data.status == 'success') {
                        if (data.msg == '已取消') {
                            $('#like_img').attr('class', 'bi bi-hand-thumbs-up text-danger')
                        } else if (data.msg == '已点赞') {
                            $('#like_img').attr('class', 'bi bi-hand-thumbs-up-fill text-danger')
                        }
                        current_elem.text(data.num);
                    }
                }
            })
        }

        {# 收藏视频 #}

        function add_fav(current_elem, fav_id, fav_type) {
            $.ajax({
                cache: false,
                type: "POST",
                url: '{% url 'add_fav' %}',
                data: {'fav_id': fav_id, 'fav_type': fav_type},
                async: true,
                beforeSend: function (xhr, setting) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
                success: function (data) {
                    if (data.status == 'fail') {
                        if (data.msg == '用户未登录') {
                            alert(data.msg)
                            $('#login_show_button').click();
                        } else {
                            alert(data.msg)
                        }
                    } else if (data.status == 'success') {
                        if (data.msg == '收藏') {
                            $('#hav_img').attr('class', 'bi bi-star text-danger')
                        } else if (data.msg == '取消收藏') {
                            $('#hav_img').attr('class', 'bi bi-star-fill text-danger')
                        }
                        $('#hav_num').text(data.num);  // 更改收藏数
                    }
                }
            })
        }

        {# 收藏视频 #}
        $(document).ready(function () {
            $('#jsLeftBtn').on('click', function () {
                add_fav($(this), {{ video.id }}, 1);
            });
        });


        {#关注用户#}

        function add_user(current_elem, fav_id, fav_type) {
            $.ajax({
                cache: false,
                type: "POST",
                url: '{% url 'add_fav' %}',
                data: {'fav_id': fav_id, 'fav_type': fav_type},
                async: true,
                beforeSend: function (xhr, setting) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
                success: function (data) {
                    if (data.status == 'fail') {
                        if (data.msg == '用户未登录') {
                            alert(data.msg)
                            $('#login_show_button').click();
                        } else {
                            alert(data.msg)
                        }
                    } else if (data.status == 'success') {
                        current_elem.text(data.msg);
                        $('#fans_num').text(data.num)
                    }
                }
            })
        }
    </script>
{% endblock %}